<template>
  <div id="index">
    <dv-full-screen-container class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>

      <div v-else class="parent">
        <div class="div1">
          <div class="title"></div>
        </div>
        <div class="div2">
          <div class="item">
            <img src="../assets/net-icon.png" />
            <div class="content">
              <div class="name">总网点数</div>
              <div class="value" style="color: #34d160">500个</div>
            </div>
          </div>
          <div class="line"></div>
          <div class="item">
            <img src="../assets/weishi-icon.png" />
            <div class="content">
              <div class="name">总环保卫士数</div>
              <div class="value" style="color: #09d4ff">1,025人</div>
            </div>
          </div>
          <div class="line"></div>
          <div class="item">
            <img src="../assets/money-icon.png" />
            <div class="content">
              <div class="name">赣州邮政为环保事业累计节省</div>
              <div class="value">15,252,014元</div>
            </div>
          </div>
        </div>
        <div class="div3">
          <getInfoWithType />
        </div>
        <div class="div4">
          <sexMonths />
        </div>
        <div class="div5">
          <best />
        </div>
        <div class="div6">
          <dealsNetwork />
        </div>
        <div class="div7">
          <infoNeteork />
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import { formatTime } from "../utils/index.js";
import getInfoWithType from "../components/info-type.vue";
import sexMonths from "../components/six-months.vue";
import dealsNetwork from "../components/deals-network.vue";
import infoNeteork from "../components/info-network.vue";
import best from "../components/best.vue";
export default {
  data() {
    return {
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    };
  },
  components: { getInfoWithType, sexMonths, dealsNetwork, infoNeteork, best },
  mounted() {
    this.timeFn();
    this.cancelLoading();
  },
  methods: {
    timeFn() {
      setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
  },
};
</script>

<style lang="scss">
@import "../assets/scss/index.scss";
.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 0.1fr repeat(2, 1fr);
  grid-column-gap: 18px;
  grid-row-gap: 22px;
}

.div1 {
  grid-area: 1 / 1 / 2 / 5;
  height: 89px;
  background: url("../assets/title-bg.png") no-repeat;
  display: flex;
  justify-content: center;

  .title {
    margin-top: 14px;
    width: 299px;
    height: 58px;
    background: url("../assets/title-logo.png") no-repeat;
  }
}
.div2 {
  grid-area: 2 / 1 / 3 / 2;
  margin-left: 24px;
  width: 452px;
  height: 496px;
  background: url("../assets/item-bg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;

  .item {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 50px;

    img {
      margin-right: 19px;
    }
    .content {
      display: flex;
      flex-direction: column;
      .name {
        font-size: 20px;
        line-height: 20px;
        font-family: Source Han Sans CN;
        color: #ffffff;
      }
      .value {
        margin-top: 12px;
        font-size: 44px;
        line-height: 44px;
        font-family: DIN;
        font-weight: bold;
        color: #fffd7a;
      }
    }
  }
  .line {
    height: 1px;
    background: rgba($color: #1c53ac, $alpha: 0.5);
    margin-left: 27px;
    margin-right: 57px;
  }
}
.div3 {
  grid-area: 3 / 1 / 4 / 2;
  margin-left: 24px;
  width: 452px;
  height: 437px;
  background: url("../assets/item-bg21.png") no-repeat;
  background-size: 100% 100%;
}
.div4 {
  grid-area: 2 / 2 / 3 / 4;
  width: 926px;
  height: 496px;
  background: url("../assets/item-bg12.png") no-repeat;
  background-size: 100% 100%;
}
.div5 {
  grid-area: 2 / 4 / 4 / 5;
  margin-right: 24px;
  width: 452px;
  height: 954px;
  background: url("../assets/item-bg2.png") no-repeat;
  background-size: 100% 100%;
}
.div6 {
  grid-area: 3 / 2 / 4 / 3;
  width: 452px;
  height: 437px;
  background: url("../assets/item-bg21.png") no-repeat;
  background-size: 100% 100%;
}
.div7 {
  grid-area: 3 / 3 / 4 / 4;
  width: 452px;
  height: 437px;
  background: url("../assets/item-bg21.png") no-repeat;
  background-size: 100% 100%;
}
</style>